<template>

<div class="w-full border-t border-b border-dashed border-red-500 flex flex-col items-center py-16">
    <!-- <div class="md:w-2/3 lg:w-4/5 shadow-md p-8 rounded flex gap-8 flex-col sm:flex-row m-4">
      <a class="border-0 hover:border-0 w-[200px] shrink-0" href="https://ditherit.threadless.com/designs/dithered-earth/mens/t-shirt/regular"  @click="track()">
        <img src="~/assets/t-shirt.png" />   
      </a>
      <div class="flex-shrink"> 
        <h3 class="text-lg font-serif mt-0">Dither it! t-shirts</h3>
        <p>Idk maybe this is a bad idea but let's try it. Here are some Dither it! t-shirts. Confuse your friends, confuse your enemies. Interested but hate the design? Let me know, I have other ideas, too.</p>
        <p>5% of proceeds go to the National Audubon Society. </p>
        <a class="pt-4 border-b-1 border-red-700 hover:text-red-800 inline-block" href="https://ditherit.threadless.com/designs/dithered-earth/mens/t-shirt/regular" @click="track()">🌎 Check em out</a>
      </div>  
    </div>     -->
    
    <div class="md:w-2/3 lg:w-4/5 shadow-md m-4 md:m-0 p-8 rounded-lg flex gap-8 flex-col sm:flex-row">
      <a class="border-0 hover:border-0" href="https://www.figma.com/community/plugin/1141558599392169513/Dither-it!">
        <svg width="200" height="82" viewBox="0 0 200 82" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path d="M27 41C27 33.5291 32.9826 27.4725 40.3626 27.4725C47.7424 27.4725 53.7251 33.5291 53.7251 41C53.7251 48.4711 47.7424 54.5275 40.3626 54.5275C32.9826 54.5275 27 48.4711 27 41Z" fill="#1ABCFE"/>
          <path d="M0.274872 68.0551C0.274872 60.5841 6.25749 54.5275 13.6374 54.5275H27V68.0551C27 75.5262 21.0174 81.5826 13.6374 81.5826C6.25749 81.5826 0.274872 75.5262 0.274872 68.0551Z" fill="#0ACF83"/>
          <path d="M27 0.417496V27.4725H40.3626C47.7426 27.4725 53.7251 21.4161 53.7251 13.945C53.7251 6.47398 47.7426 0.417496 40.3626 0.417496H27Z" fill="#FF7262"/>
          <path d="M0.274872 13.945C0.274872 21.416 6.25749 27.4725 13.6374 27.4725H27V0.41748H13.6374C6.25749 0.41748 0.274872 6.47396 0.274872 13.945Z" fill="#F24E1E"/>
          <path d="M0.274872 41C0.274872 48.4711 6.25749 54.5275 13.6374 54.5275H27V27.4725H13.6374C6.25749 27.4725 0.274872 33.5291 0.274872 41Z" fill="#A259FF"/>
          <rect x="118" width="82" height="82" fill="url(#pattern0)"/>
          <path d="M83.9091 53.6136V31.1136H87.7273V53.6136H83.9091ZM74.5682 44.2727V40.4545H97.0682V44.2727H74.5682Z" fill="#C53030"/>
          <defs>
          <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
          <use xlink:href="#image0_12_67" transform="scale(0.0078125)"/>
          </pattern>
          <image id="image0_12_67" width="128" height="128" xlink:href=""/>
          </defs>
        </svg>    
      </a>
      <div> 
        <h3 class="text-lg font-serif mt-0">Dither it! for Figma v1.0.0</h3>
        <p> Finally, the plugin that literally no one has ever asked for...Dither It! for Figma is now available.</p>

        <p>Features include:</p>

        <ul class="list-disc pl-4">
          <li>Dithering images in Figma</li>
        </ul>
        <a class="pt-4 border-b-1 border-red-700 hover:text-red-800 inline-block" href="https://www.figma.com/community/plugin/1141558599392169513/Dither-it!">🌀 Take it for a spin</a>
      </div>  
    </div>  
    <!-- begin three column -->
    <div
      class="flex space-y-8 md:space-y-0 md:space-x-16 flex-col md:flex-row  pt-4 mt-8 px-4 mx-2 sm:mx-8 md:mx-16 lg:mx-24 xl:mx-32 "
    >
      <div class="w-full md:w-1/3">
        <h3 class="text-lg font-serif">Open Source</h3>
        <p>The Dither it! source code is available for your browsing pleasure on github.</p>
        <p><a href="https://github.com/alexharris/ditherit-v2">Read more</a></p>        
      </div>
      <div class="w-full md:w-1/3">
        <h3 class="text-lg font-serif">Resources</h3>
        <p>A list of dithering <a href="/resources">resources</a> from around the web. Explainers, algorithms, examples, etc.</p>
      </div>      
      <div class="w-full md:w-1/3">
        <h3 class="text-lg font-serif">Support</h3>
        <p>Support the continued existence of Dither it! with a small donation. Much appreciated.</p>
        <p><a
            href="https://ko-fi.com/E1E7DZSYP"
            >
            ☕ Buy me a coffee
        </a>  
        </p>
      </div>  
    </div>
    <Examples />
    <ContactForm />
    <div class="flex flex-col items-center">
      <div class="my-24">
        <div class="md:flex-row  mx-4 md:mx-0 max-w-3xl ">
              <h3 class="text-3xl w-full pb-12 font-serif text-center mx-0 px-0">About Dither it!</h3>

          <h3 class="font-serif text-lg">What is Dithering?</h3>
          <p> Dithering is a method for trying to make an image look good while reducing the number of colors it uses, or as <a href="https://en.wikipedia.org/wiki/Dither">wikipedia puts it:</a></p>
          <blockquote class="bg-gray-50">Dithering is used in computer graphics to create the illusion of "color depth" in images with a limited color palette - a technique also known as color quantization. In a dithered image, colors that are not available in the palette are approximated by a diffusion of colored pixels from within the available palette. The human eye perceives the diffusion as a mixture of the colors within it (see color vision). Dithered images, particularly those with relatively few colors, can often be distinguished by a characteristic graininess or speckled appearance. </blockquote>
          <p>For more information, see this list of dithering <a href="/resources">resources</a> from around the web: explainers, algorithms, examples, etc.</p>
          <h3 class="font-serif text-lg pt-8">About this site</h3>
          <p>Dither it! is built by <a href="https://alexharris.online/">Alex Harris</a>.</p>

          <p>It was inspired by a <a href="https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website/">blog post from Low-tech Magazine</a> about how to reduce the energy usage associated with running websites. One method discussed was to reduce full color images to dithered images with very few colors and subsequently smaller file sizes. Ensuing discussion clarified that there are other, more modern ways to compress images (try <a href="https://squoosh.app/">Squoosh</a>) which achieve reduced file sizes while maintaining color. Nonetheless, dithering is a fun technique that looks cool and is interesting to learn about.</p>

          

          <p>The Dither it! source code is freely available on the <a href="https://github.com/alexharris/ditherit-v2">Dither it! Github page</a>. Please feel free to contribute, share or pilfer.</p>

          <p>Thanks to Leon Sorokin, for making <a href="https://github.com/leeoniya/RgbQuant.js">RgbQuant.js</a> and Don for making <a href="https://xiaokaike.github.io/vue-color/">vue-color</a>.</p>
          <p>Image slider for examples: <a href="https://img-comparison-slider.sneas.io/examples.html">Img Comparison Slider</a></p>
        </div>  
      </div>
    </div>


    
    <!-- <div class="mt-32 px-4 border-t border-dashed border-red-500 pt-16 flex mx-2 sm:mx-8 md:mx-16 lg:mx-32 xl:mx-64 flex-col md:flex-row">
      
      <div class="w-full md:w-1/2 p-4">
        <h4>About Dithering</h4>
        <p> Dithering is essentially a method for trying to make an image look good while reducing the number of colors it uses, or as <a href="https://en.wikipedia.org/wiki/Dither">wikipedia puts it:</a></p>
        <blockquote>Dithering is used in computer graphics to create the illusion of "color depth" in images with a limited color palette - a technique also known as color quantization. In a dithered image, colors that are not available in the palette are approximated by a diffusion of colored pixels from within the available palette. The human eye perceives the diffusion as a mixture of the colors within it (see color vision). Dithered images, particularly those with relatively few colors, can often be distinguished by a characteristic graininess or speckled appearance. </blockquote>
        <p>I'm no scientist, but I think basically what that means is: When reducing an image from many colors to fewer colors you can't get every pixel exactly right, but you can spread that error around to neighboring pixels which helps it look more like the original. The various wasy to spread that error around are the various dithering algorithms.</p>
        <p>Is this wrong? <a href="https://twitter.com/alexharris6">Tweet at me</a>.</p>

      </div>
      <div class="w-full md:w-1/2 p-4">
      
      <h4>About Dither it!</h4>
      <p class="text-xl">Built by <a href="https://alexharris.online/">Alex Harris</a>, on twitter <a href="https://twitter.com/alexharris6">@alexharris6</a>. Show me what you've dithered!</p>
      <p>Dither it! was inspired by a <a href="https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website/">blog post from a site called Low-tech Magazine</a> about how to reduce the energy usage associated with running websites. One method they discussed was to reduce full color images to dithered images with very few colors. Ensuing comments clarified that there are other, more modern ways to compress images which achieve small file sizes while maintaining color, but I still think it is a fun technique that looks cool and is interesting to learn about.</p>



      <h4>Source code</h4>
      <p>The Dither it! source code is available on the <a href="https://github.com/alexharris/ditherit-v2">Dither it! Github page</a>. Please feel free to contribute, share or pilfer.</p>

      <h4>Thanks</h4>

      <ul>
      <li>Leon Sorokin, for making <a href="https://github.com/leeoniya/RgbQuant.js">RgbQuant.js</a></li>
      <li>Don, for making <a href="https://xiaokaike.github.io/vue-color/">vue-color</a></li>
      <li><a href="https://lowtechmagazine.com">Low-tech Magazine</a></li>
      </ul>

    

  </div>
          
      </div> -->
</div>
</template>


<script>

import Examples from '~/components/Examples.vue'
import ContactForm from '~/components/ContactForm.vue'

export default {
  components: {
    Examples,
    ContactForm
  },     
  data() {
    return {
    }
  },
  
  methods: {
    track() {
      fathom('trackGoal', 'GAHXDKWX', 0)
    }
  
  }
}
</script>
